<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>the jquery ajax 01 page</h1>
    <button onclick=doAjax()>Do Ajax Get</button>
    <button onclick=doAjaxPost()>Do Ajax Post</button>
    <button onclick=doAjaxGet()>Do Ajax get</button>
    <button onclick=doAjaxGet("delete")>Do Ajax Delete</button>
    <div id="result"></div>
</div>
<script src="/js/jquery.min.js"></script>
<script>
    //基于jquery中的get函数
    function doAjaxGet() {
        //1.定义url
        let url = "/doAjaxGet";
        //2.定义请求参数
        let params = "id=200&name=oppo&remark=very good";
        //3.发送post请求
        //get函数语法post(url[,params][,callback])
        $.get(url,params,function (result) {
            //服务端返回的字符串假如满足json格式，get函数自动回将这个json格式的字符串转换为js对象
            console.log(result)
            $("#result").html(result);//html函数只接收字符串
        },"text");//get函数是jquery中$.ajax({})函数的一种演变形式
        //text为数据类型（dataType）
    }

    //基于jquery中的post函数
    function doAjaxPost() {
        //1.定义url
        let url = "/doAjaxPost";
        //2.定义请求参数
        let params = "id=200&name=oppo&remark=very good";
        //3.发送post请求
        //post函数语法post(url[,params][,callback])
        $.post(url,params,function (result) {
            $("#result").html(result);
        });//psot函数是jquery中$.ajax({})函数的一种演变形式
    }

    //基于jquery中的ajax函数，向服务端发送异步请求
    function doAjax() {
        //1.定义url
        let url = "/doAjaxPost";
        //2.定义请求参数
        let params = "id=200&name=oppo&remark=very good";
        //3、发送异步请求（底层会借助XmlHttpRequest对象）
        $.ajax({//这里的$符号为jquery对象
            type:"post",//不写这个选项，默认为get请求
            url: url,
            data: params,
            success:function (result) {//xhr.readState==4$$xhr.status==200
                $("#result").html(result);//这里的result为服务端响应到客户端的结果
            }
        })
    }
</script>
</body>
</html>